// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Button,Popconfirm, Modal, Row, Col, Input, Select, Cascader, Icon, Checkbox, Tabs, DatePicker, message } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './taskInfoStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import moment from 'moment';
import Track from 'widget/Map/Track'
import { Grid, QueryCondition } from 'widget/Grid'

const FormItem = Form.Item
const { RangePicker } = DatePicker

const formItemLayoutPro = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const formItemLayoutForTime = {
  labelCol: { span: 2 },
  wrapperCol: { span: 20 },
};
const imageLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 22 },
}
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const taskInfoView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue,validateFieldsAndScroll } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  let {areaList,loading,userList,detail, actionType} = modelObj
  // 表格配置------------开始
  const columns = [
    {
      title: '编号', dataIndex: 'no', key: 'no', width: 200,
      render: function (value, item, index) {
            return index+1
      }
    }, 
    {
      title: '用户名', dataIndex: 'name', key: 'name', width: 200,
      render: function (value, item, index) {
        return item.name
      }
    },
    {
      title: '头像', dataIndex: 'photo', key: 'photo', width: 200,
      render: function (value, item, index) {
        return <div>
          <img style={{width:'66px',height:'66px'}} src={item.photo} alt=""/>
        </div>
      }
    }
  ]
  const gridProps = {
    nameSpace: namespace,
    data: {
      columns: columns,//已发布的活动不能添加和删除时间段
      pageConfig:{},
      tableData: {total: '',dataSource: userList},
    },
    scroll: { x: 1200 },
    paginationFlag : false,
    loading
  }
  function goback(){
    hashHistory.push({
      pathname: '/home/expandManage/taskList',
      query: {}
    });
  }
  function timestampToTime(timestamp) {
    var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
     return Y+M+D+h+m+s;
  }
  return (
    <div className='public_listMain'>
      <div className={"functionButton"}>
          <Button onClick={() => goback()} >返回</Button>
      </div>

      <CollapsiblePanels title="任务信息" hideUpDownBtn={true} >
        <Row>
          <Col span={8}>
            <FormItem label='区域'  {...formItemLayoutPro}>
              {getFieldDecorator('areaId', {
                rules: [{
                  required: false, whitespace: true, message: '请选择区域'
                }],
                initialValue: detail.areaId
              })(
                <Select disabled={true} placeholder='请选择区域' onChange={(e) => { inputAreaChange(e, 'areaId') }}>
                  {areaList == undefined ?null:areaList.map((item)=>{
                      return <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                    })}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='项目'  {...formItemLayoutPro}>
              {getFieldDecorator('projectName', {
                rules: [{
                  required: false, whitespace: true, message: '请选择项目'
                }],
                initialValue: detail.projectName
              })(
              <span>{detail.projectName}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='渠道'  {...formItemLayoutPro}>
              {getFieldDecorator('channel', {
                rules: [{
                  required: false, whitespace: true, message: '请选择渠道'
                }],
                initialValue: detail.channel
              })(
                <span>{detail.channel}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='任务名称'  {...formItemLayoutPro}>
              {getFieldDecorator('taskName', {
                rules: [{
                  required: false, whitespace: true, message: '请输入任务名称'
                }],
                initialValue: detail.taskName
              })(
                <span>{detail.taskName}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
            <Col className="col" span={8}>
            <FormItem label='任务地址'  {...formItemLayoutPro}>
                {getFieldDecorator('addressName', {
                rules: [{
                    required: false, whitespace: true, message: '请输入任务地址'
                }],
                initialValue: detail.addressName
                })(
                  <span>{detail.addressName}</span>
                )}
            </FormItem>
            </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='拓客任务量'  {...formItemLayoutPro}>
              {getFieldDecorator('target', {
                rules: [{
                  required: false, whitespace: true, message: '请输入拓客任务量'
                }],
                initialValue: detail.target
              })(
                <span>{detail.target}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='任务发布人'  {...formItemLayoutPro}>
              {getFieldDecorator('createrName', {
                rules: [{
                  required: false, whitespace: true, message: '请输入任务发布人'
                }],
                initialValue: detail.createrName
              })(
                <span>{detail.createrName}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='开始时间'  {...formItemLayoutPro}>
              {getFieldDecorator('startTime', {
                rules: [{
                  required: false, whitespace: true, message: '请输入开始时间'
                }],
                initialValue: detail.startTime
              })(
                <span>{timestampToTime(detail.startTime)}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='结束时间'  {...formItemLayoutPro}>
              {getFieldDecorator('endTime', {
                rules: [{
                  required: false, whitespace: true, message: '请输入结束时间'
                }],
                initialValue: detail.endTime
              })(
                <span>{timestampToTime(detail.endTime)}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='拓客方式'  {...formItemLayoutPro}>
              {getFieldDecorator('methodName', {
                rules: [{
                  required: false, whitespace: true, message: '请输入拓客方式'
                }],
                initialValue: detail.methodName 
              })(
                <span>{detail.methodName}</span>
              )}
            </FormItem>
          </Col>
        </Row>
        <div style={{padding: '0 4.4%'}}>
            <span>添加成员 :</span>
            <div style={{padding: '0 66px'}}>
              <div className="detailsTab">
                  <Grid {...gridProps} />
              </div>
            </div>
        </div>
      </CollapsiblePanels>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(taskInfoView))